<template>
  <div class="hoem">
    <!-- 轮播 -->
    <van-swipe
      class="my-swipe"
      width="100vw"
      :autoplay="2000"
      indicator-color="white"
    >
      <van-swipe-item v-for="(v, k) in msglist.lb" :key="k">
        <img :src="v" alt="" class="lb" />
      </van-swipe-item>
    </van-swipe>

    <!-- 新中式 -->
    <div class="new" v-if="msglist.main" style="text-align: center">
      <img width="75%" :src="baseurl + msglist.main.t_tt" />
      <p>{{ msglist.main.t_text }}</p>
      <hr style="width: 50px" />
      <img
        width="100%"
        style="margin-top: 20px"
        :src="baseurl + msglist.main.t_img"
      />
      <div
        class="new_flt"
        :style="`background: url(${
          baseurl + msglist.main.left_img
        }) no-repeat left center/88px 100%;`"
      >
        <p>
          {{ msglist.main.txt }}
          <img width="" :src="baseurl + msglist.main.dian" />
        </p>
        <img :src="baseurl + msglist.main.ftl" width="100px" />
      </div>
    </div>

    <!-- 服务 -->
    <div class="fw" v-if="baseurl">
      <img :src="baseurl + msglist.dDeng_Src" width="133px" />
      <div v-if="init">
        <p style="margin-top: 35px">{{ servelist[0].tt }}</p>
        <p>{{ servelist[0].txt }}</p>
        <img width="100%" :src="baseurl + servelist[0].imgSrc" />
      </div>
      <div v-for="(v, k) in servelist.slice(1)" :key="k">
        <div
          :style="`background: no-repeat url(${baseurl + v.imgSrc}) ${
            k % 2 == 0 ? 'left' : 'right'
          } center/111px 75px ;padding-${
            k % 2 == 0 ? 'left' : 'right'
          }:120px ;`"
          v-if="init"
        >
          <p>{{ v.tt }}</p>
          <p>{{ v.txt }}</p>
        </div>
        <img
          v-if="k < 2"
          :src="baseurl + servelist.lang_Src"
          width="100%"
          height="40px"
        />
      </div>
    </div>

    <!-- 定制家具 -->
    <div>
      <div class="dingZ" v-if="baseurl">
        <h3
          class="dingZ_h3"
          :style="`background: no-repeat url(${
            baseurl + msglist.dingZ.bg
          }) center/100% 100%;`"
        >
          {{ msglist.dingZ.tt }} <br />
          <span>{{ msglist.dingZ.txt }}</span>
        </h3>
        <div
          style="
            display: flex;
            justify-content: space-around;
            font-size: 12px;
            text-align: center;
            color: #888;
          "
        >
          <div v-for="(v, k) in msglist.dingZ.arr" :key="k">
            <!-- 五个图片 -->
            <div
              class="dZ_wt"
              :style="`background: no-repeat url(${
                baseurl + v.id_bg
              }) center/100% 100%;`"
            >
              <img class="dZ_img" :src="baseurl + v.bg" width="20" />
            </div>
            <span>{{ v.txt }}</span>
          </div>
        </div>

        <!-- 表单 -->
        <van-cell-group style="margin-top: 20px">
          <!-- 姓名 -->
          <van-field
            v-model="userform.name"
            label="姓名"
            placeholder="请填写姓名"
          />

          <!-- 输入手机号 -->
          <van-field
            v-model="userform.tel"
            type="tel"
            label="手机号"
            placeholder="请填写手机号"
          />

          <!-- 选择地区 -->
          <van-field
            readonly
            clickable
            name="area"
            :value="userform.value"
            label="地区选择"
            placeholder="点击选择省市区"
            @click="showArea = true"
          />
          <van-popup v-model="showArea" position="bottom">
            <van-area
              :area-list="areaList"
              @confirm="onConfirm"
              @cancel="showArea = false"
            />
          </van-popup>

          <!-- 选择日期 -->
          <van-field
            readonly
            clickable
            name="calendar"
            :value="userform.value_d"
            label="日历"
            placeholder="点击选择日期"
            @click="showdate = true"
          />
          <van-calendar v-model="showdate" @confirm="onConfirm_d" />

          <!-- 留言  -->
          <van-field
            v-model="userform.message"
            rows="2"
            autosize
            label="留言"
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
          />

          <!-- 提交 -->
          <div class="btn">
            <van-button
              round
              block
              type="warning"
              native-type="submit"
              @click="send()"
              >火爆！火爆！快枪！快枪！</van-button
            >
          </div>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msglist: [], //图片列表
      baseurl: [], //图片基准路径
      servelist: [], //服务模块列表
      showdate: false, //日期展示
      showArea: false, //地区展示
      areaList: {}, //地区列表
      sendform: [], //提交用户表单
      userform: {
        //用户信息表单
        value_d: "",
        value: "",
        name: "",
        tel: "",
        area: "",
      },
    };
  },
  methods: {
    async init() {
      //获取首页数据 轮播
      let res = await this.$api.Gethome();
      if (res.data.code == 200) {
        this.msglist = res.data.msg;
        this.baseurl = res.data.baseurl;
        this.servelist = res.data.msg.fw;
        console.log(this.servelist);
      }
    },
    onConfirm(v) {
      //地区展示
      console.log(v);
      this.userform.area = v
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    cancel() {
      //取消地区选择
      showArea = false;
    },
    formatDate(date) {
      // 日期展示格式
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm_d(date) {
      //日期展示验证
      this.showdate = false;
      this.userform.value_d = this.formatDate(date);
    },
    onSubmit(values) {
      //登陆
      console.log("submit", values);
    },
    send() {
      console.log(6666);
      // let obj = {};
    },
  },
  mounted() {
    this.init();
    // console.log(this.imglist);
  },
};
</script>

<style>
/* 清基线 */
img {
  vertical-align: middle;
}
/* 轮播 */
.lb {
  width: 100%;
  height: 188px;
  border-bottom: 10px solid #eee;
}
.new {
  box-sizing: border-box;
  padding: 30px 20px;
  border-bottom: 10px solid #eee;
}
.new_flt {
  height: 100px;
  box-sizing: border-box;
  padding-left: 108px;
  text-align: left;
}
/* 服务 */
.fw {
  border-top: 10px solid #eee;
  padding: 0px 30px 30px;
  position: relative;
}
.fw div > p:nth-child(2) {
  font-size: 10px;
  color: #888;
  margin: 20px 0;
}
.fw > img {
  position: absolute;
  right: 15px;
}
/* 定制家具 */
.dingZ {
  background: #eee;
  padding-top: 30px;
}
.dingZ_h3 {
  width: 100%;
  height: 95px;
  text-align: center;
  box-sizing: border-box;
  padding-top: 20px;
  font-size: 22px;
}
.dingZ_h3 > span {
  font-size: 12px;
  color: #aaa;
  font-weight: 500;
}
.dZ_wt {
  width: 44px;
  height: 44px;
  position: relative;
  margin: 0 auto;
}
.dZ_img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.btn {
  position: relative;
  bottom: 35px;
  margin: 35px;
}
</style>